<template>
  <div class="parent d-flex flex-column">
    <el-row :gutter="20">
      <div class="div-time-range">
        <el-date-picker
          v-model="daterange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
           value-format="yyyy-MM-dd"
        ></el-date-picker>
        <el-select v-model="value1" collapse-tags multiple style="margin-right:10px">
          <el-option
            v-for="item in elevatorList"
            :key="item.elevatorId"
            :label="item.elevatorName"
            :value="item.elevatorId"
          />
        </el-select>
        <MyButton class="confirm" @click="handleSearch">
          {{
          $t("common.search")
          }}
        </MyButton>
      </div>
      <HomeCard desc="total" title="汇总">
        <ActivePlate :infoList="infoCardData" />
      </HomeCard>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <HomeCard desc="person count" title="通行人数">
            <ChartPie :value="pieData" />
          </HomeCard>
        </div>
      </el-col>
      <el-col :span="18">
        <div class="grid-content bg-purple">
          <HomeCard desc="run time" title="行程次数">
            <ChartLine :value="lineData" />
          </HomeCard>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <HomeCard desc="run " title="运转时间">
        <ChartBar :value="barData" />
      </HomeCard>
    </el-row>
  </div>
  <!-- <div class="parent d-flex flex-column">
    <Row :gutter="20">
      <i-col :lg="6" :md="24">
        
      </i-col>
      <i-col :lg="18" :md="24">
        <div class="div-time-range">
          <DatePicker
            placeholder="选择日期范围"
            confirm
            split-panels
            :options="options2"
            style="width: 200px"
            type="daterange"
            v-model="timeRange1"
            @on-ok="queryLine"
          ></DatePicker>
        </div>
        <HomeCard desc="User Access" title="每周通行量">
          <ChartLine :value="lineData" />
        </HomeCard>
      </i-col>
    </Row>
    <Row :gutter="20">
      <i-col :lg="24" :md="24">
        <div class="div-time-range">
          <DatePicker
            placeholder="选择日期范围"
            confirm
            split-panels
            :options="options2"
            style="width: 200px"
            type="daterange"
            v-model="timeRange2"
            @on-ok="queryBar"
          ></DatePicker>
        </div>
        <HomeCard desc="Visitor" title="访客">
          <ChartBar :value="barData" />
        </HomeCard>
      </i-col>
    </Row>
    <!-- <Row :gutter="20">
      <i-col :lg="12" :md="24">
        <HomeCard desc="progress" title="进度条">
          <HomeProgress :value="pieData" />
        </HomeCard>
      </i-col>
      <i-col :lg="6" :md="24">
        <HomeCard desc="progress" title="目标完成度">
          <Home-circle />
        </HomeCard>
      </i-col>
      <i-col :lg="6" :md="24">
        <HomeCard desc="progress" title="漏斗图">
          <ChartFunnel :value="pieData" />
        </HomeCard>
      </i-col>
    </Row>
  </div>-->
</template>

<script>
import ActivePlate from "@/components/active-plate/active-plate";
import CountTo from "@/components/count-to";
import HomeCard from "./components/card";
import ChartPie from "./components/chart-pie";
import ChartLine from "./components/chart-line";
import ChartGauge from "./components/chart-gauge";
import ChartBar from "./components/chart-bar";
import HomeCircle from "./components/home-circle";
import HomeProgress from "./components/home-progress";
import ChartFunnel from "./components/chart-funnel";
import {
  queryReport,
  queryRunData,
  queryRunTimes,
  queryRunPCount,
  getElevatorList
} from "./service";
export default {
  name: "Home",
  components: {
    HomeCard,
    ActivePlate,
    CountTo,
    ChartPie,
    ChartFunnel,
    ChartLine,
    HomeCircle,
    ChartGauge,
    ChartBar,
    HomeProgress
  },
  props: {},
  data() {
    return {
      value1: [],
      elevatorList: [],
      adModal: true,
      infoCardData: [
        {
          title: "35",
          runTimes: 0,
          startTime: 0
        },
        {
          title: "36",
          runTimes: 0,
          startTime: 0
        },
        {
          title: "37",
          runTimes: 0,
          startTime: 0
        }
      ],
      pieData: [
        { value: 335, name: "35号电梯" },
        { value: 310, name: "36号电梯" },
        { value: 234, name: "37号电梯" }
      ],
      lineData: {},
      barData: {},
      daterange: ""
    };
  },
  computed: {},
  watch: {},
  filters: {},
  created() {},
  mounted() {
    this.queryElevatorInfo();
    this.setDefaultDateRange();
    this.queryList(this.value1);
  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
  methods: {
     setDefaultDateRange() {
      const endDate = new Date(); // 当前日期
      const startDate = new Date();
      startDate.setDate(endDate.getDate() - 6); // 最近7天的开始日期（当前日期前6天）

      // 设置默认选中的日期范围
      this.daterange = [this.formatDate(startDate), this.formatDate(endDate)];
    },
    formatDate(date) {
      // 格式化日期为 YYYY-MM-DD
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    queryElevatorInfo() {
      getElevatorList({})
        .then(res => {
          this.elevatorList = res.data.rows;
        })
        .catch(error => {
          console.log(error);
        });
    },
    handleSearch() {
      console.log(this.daterange[0])
      this.queryList(this.value1);
    },
    queryList(eleList) {
      var eleParam = eleList.join(",");
      queryReport({
        eleInfo: eleParam,
        startTime:  this.daterange[0],
        endTime:  this.daterange[1]
      })
        .then(res => {
          this.infoCardData = res.data;
        })
        .catch(error => {
          console.log(error);
        });

      queryRunData({
        eleInfo: eleParam,
        startTime:  this.daterange[0],
        endTime:  this.daterange[1]
      })
        .then(res => {
          this.lineData = res.data;
        })
        .catch(error => {
          console.log(error);
        });

      queryRunTimes({
        eleInfo: eleParam,
        startTime:  this.daterange[0],
        endTime:  this.daterange[1]
      })
        .then(res => {
          this.barData = res.data;
        })
        .catch(error => {
          console.log(error);
        });

      queryRunPCount({
        eleInfo: eleParam,
        startTime:  this.daterange[0],
        endTime:  this.daterange[1]
      })
        .then(res => {
          this.pieData = res.data;
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>

<style lang="less">
.count-style {
  font-size: 50px;
}
.div-time-range {
  position: absolute;
  right: 30px;
  top: 20px;
}
.custom-select .el-select__tags {
  white-space: nowrap !important; /* 防止换行 */
  overflow: hidden !important;
  text-overflow: ellipsis !important; /* 超出显示省略号 */
}

.custom-select .el-select__tags .el-tag {
  margin-right: 8px !important; /* 选项间距 */
}
</style>
